<template>
  <div>
    <zm-dialog title="导出" :visible.sync="value" :before-close="onCancel" :show-footer-line="true">
      <!-- <el-drawer
        class="header-select"
        :visible.sync="value"
        append-to-body
        :wrapper-closable="false"
        direction="rtl"
        size="550px"
      > -->
        <zm-tabs
          :list="tabList"
          v-model="active"
          label-key="name"
          name-key="value"
          class="mb20 pl10"
        ></zm-tabs>
        <!-- 全部字段 -->
        <div class="flex1 plr20" v-if="active==='1'">
          <zm-checkbox v-model="form.fields" :list="exportList" :option="{isShowInvertSelect:true}" more-style="mb20"></zm-checkbox>
        </div>

        <!-- 公开模板 -->
        <export-template key="public" v-if="active==='2'" :type="type" :export-list="exportList" is-public="1" @after-save="getRadioValue"></export-template>

        <!-- 私人模板 -->
        <export-template key="private" v-if="active==='3'" :type="type" :export-list="exportList" is-public="0" @after-save="getRadioValue"></export-template>

        <div slot="footerLeft" class="mt10 fl mlr20" v-if="active==='1'">
          <el-checkbox v-model="isSaveTemplate">本次导出是否保存模板</el-checkbox>
        </div>
        <div slot="footer" class="df mt10 fr mlr20">
          <zm-button @click="onCancel" type="">取消</zm-button>
          <zm-button @click="submit" type="primary">确认</zm-button>
        </div>
      <!-- </el-drawer> -->
      <!-- 新增模板 -->
      <create-template v-model="showCreate" v-if="showCreate" :type="type" :export-id="form.fields" @after-save="handleCreateCallBack"></create-template>
    </zm-dialog>
  </div>
</template>
<script>
import ExportTemplate from './components/ExportTemplate'
import CreateTemplate from './components/CreateTemplate'
export default {
  name: '',
  components: {ExportTemplate, CreateTemplate},
  mixins: [],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    api: {
      type: Function,
      default: () => {}
    },
    type: { // 请求的模板数据类型
      type: String,
      default: '',
      required: true
    },
    extendParams: {
      type: Object,
      defalut: {}
    }
  },
  data () {
    return {
      form: {
        fields: ''
      },
      exportList: [],
      active: '1',
      tabList: [
        {
          name: '全部字段',
          value: '1'
        },
        {
          name: '公开模板',
          value: '2'
        },
        {
          name: '私人模板',
          value: '3'
        }
      ],
      isSaveTemplate: false,
      showCreate: false
    }
  },
  computed: {
    visible: {
      get () {
        return this.value
      },
      set (v) {
        this.$emit('input', v)
      }
    }
  },
  created () {
    this.getFields()
  },
  methods: {
    async getFields () {
      this.exportList = await this.api(this.extendParams)
    },
    dialogClose () {
      this.$nextTick(() => {
        this.visible = false
      })
    },
    submit () {
      if (this.form.fields.length <= 0) {
        this.$message.warning('请选择导出字段')
        return
      }
      if (this.isSaveTemplate && this.active === '1') {
        this.showCreate = true
      } else {
        this.$emit('after', this.form.fields)
        this.dialogClose()
      }
    },
    getRadioValue (item) {
      this.form.fields = item.exportField
    },
    handleCreateCallBack () {
      this.$emit('after', this.form.fields)
      this.dialogClose()
    },
    onCancel () {
      this.$emit('isAllClose')
      this.$nextTick(() => {
        this.visible = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-checkbox-group label {
  margin-bottom: 20px;
}
</style>
